<template>
  <div style="margin-top: 30px">
    <a-card style="background-color: white">
      <a-descriptions :column="4" bordered>
        <template slot="title">
          <h3>
            <a-avatar
              :size="64"
              icon="user"
              :src="avaSrc"
              style="margin-right: 15px"
            />用户信息
          </h3>
          <a-alert
            message="您还没有设置密码，为了您的账号安全，请设置密码"
            banner
            closable
          />
        </template>
        <a-descriptions-item label="用户昵称" :span="2">
          {{ u.nick }}
        </a-descriptions-item>
        <a-descriptions-item label="QQ号码" :span="2">
          {{ u.qq }}
        </a-descriptions-item>
        <a-descriptions-item :span="2">
          <template slot="label">
            <a-tooltip>
              <template slot="title">
                手机号是您用户安全的重要指标，若您未绑定手机号，则可能影响支付和短信通知
              </template>
              手机号码
              <a-icon type="question-circle" style="margin-left: 5px" />
            </a-tooltip>
          </template>
          <div v-if="u.phone" style="display: flex; justify-content: center">
            <div>
              {{ u.phone }}
            </div>
            <div>
              <a-icon
                type="edit"
                theme="twoTone"
                style="margin-left: 18px"
                @click="editPhone"
              />
            </div>
          </div>
          <div
            v-else
            style="display: flex; justify-content: center; align-items: center"
          >
            <div>暂未绑定</div>
            <a-button type="link" @click="handlePhone" v-if="!u.phone">
              绑定>
            </a-button>
          </div>
        </a-descriptions-item>
        <a-descriptions-item :span="2">
          <template slot="label">
            <a-tooltip>
              <template slot="title">
                您的安全级别取决于您是否设置了合理的密码。设置密码可以让您安全便捷的使用账户服务。
              </template>
              安全级别
              <a-icon type="question-circle" style="margin-left: 5px" />
            </a-tooltip>
          </template>
          低
          <a-button type="link" @click="setPswd"> 设置密码> </a-button>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间" :span="2">
          {{ u.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="上次登录" :span="2">
          1970-01-01 00:00:00
        </a-descriptions-item>
        <a-descriptions-item label="用户状态" :span="4">
          <a-badge status="processing" text="正常" />
        </a-descriptions-item>
        <a-descriptions-item label="钱包余额" :span="3">
          {{ u.amount }} 元
          <a-button type="link"> 充值> </a-button>
        </a-descriptions-item>
        <a-descriptions-item label="抵扣额度"> 0.00 元 </a-descriptions-item>
        <a-descriptions-item label="历史账单"> 0 条 </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <!-- 设置手机号的modal -->
    <a-modal
      :title="this.u.phone ? '修改手机号' : '绑定手机号'"
      :visible="setPhoneVisible"
      :confirm-loading="setPhoneLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="ruleForm"
        :model="setPhoneForm"
        :rules="setPhoneRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="请输入手机号" prop="phone">
          <a-input v-model="setPhoneForm.phone" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 设置密码的modal -->
    <a-modal
      title="设置密码"
      :visible="setPswdVisible"
      :confirm-loading="setPswdLoading"
      @ok="handleOk1"
      @cancel="handleCancel1"
    >
      <a-form-model
        ref="ruleForm1"
        :model="setPswdForm"
        :rules="setPswdRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="请设置密码" prop="password">
          <a-input v-model="setPswdForm.password" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getMineInfo, setPhone, setPswd, getSafe } from '../../../api/User'
import User from '@/interface/User'
import Msg from '@/interface/Msg'
import Infos from '@/interface/Infos'
import { checkPhone } from '@/plugins/checkPhone'
@Component
export default class Info extends Vue {
  u: User = {}
  labelCol = { span: 6 }
  wrapperCol = { span: 14 }
  setPhoneVisible = false
  setPhoneLoading = false
  setPhoneForm: Infos = {
    phone: null,
  }
  setPhoneRules = {
    phone: [{ validator: checkPhone, trigger: 'change' }],
  }
  setPswdVisible = false
  setPswdLoading = false
  setPswdForm: Infos = {
    password: null,
  }
  setPswdRules = {
    password: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'blur',
      },
      { min: 8, max: 16, message: '密码长度必须在8-16之间', trigger: 'blur' },
    ],
  }
  async created() {
    let res: Msg = await getMineInfo()
    this.u = res.data
    console.log(this.u)
    const data = await getSafe()
    console.log(data)
  }
  get avaSrc() {
    return 'http://api.xyde.net.cn/auth/qq/avater.php?qq=' + this.u.qq
  }
  handlePhone() {
    this.setPhoneVisible = true
  }
  handleOk(ruleForm) {
    this.$refs.ruleForm.validate(async (valid) => {
      if (valid) {
        let res: Msg = await setPhone(this.setPhoneForm.phone)
      } else {
        console.log('错误')
        return false
      }
    })
  }
  handleCancel() {
    console.log(2)
    this.setPhoneVisible = false
  }
  editPhone() {
    this.setPhoneVisible = true
  }
  setPswd() {
    this.setPswdVisible = true
  }
  handleOk1(ruleForm1) {
    this.$refs.ruleForm1.validate(async (valid) => {
      if (valid) {
        let res: Msg = await setPswd({ pswd: this.setPswdForm.password })
      } else {
        console.log('错误')
        return false
      }
    })
  }
  handleCancel1() {
    this.setPswdVisible = false
  }
}
</script>

<style scoped>
</style>
